/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, Dimensions} from 'react-native';
import {Carousel} from 'antd-mobile-rn';
import SplashScreen from 'react-native-splash-screen';
import HttpTemp from "../preset/func/http/httptemp"

// project
import {
    Page, Content, Svg, Text, Label, Image, ScrollX, ScrollY, ItemX, ItemY, Row, Header, Footer, 
    Float, Wrap, Touch, Hand, ButtonOpacity, ButtonLight, TouchOpacity, TouchLight
} from '../library'
import {Icon, FooterMain} from '../preset';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

const imgUrl = "http://image.cdn.hesq.com.cn/fuping/";

export default class Index extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        this.state = {
            banner:[],
            category:[],
            article:[],
        }
    }
    
    /*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
    /**
     * didMount
     */
    componentDidMount(){

        // 关闭启动画面
        //SplashScreen.hide();

        // http请求
        HttpTemp.get({
            url:"/page/home/home.php",
            success:(res) => {
                let data = res.data;
                this.setState({
                    banner:data.banner,
                    category:data.category,
                    article:data.article,
                })

                console.log(this.state.category)
            }
        })

    }

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<Page>

				{/* 内容部分 */}
				<Content my='40' bg='#efeff4'>

                    {/* 轮播图 */}
                    <Carousel
                        autoplay
                        // dots={false}
                        infinite
                        autoplayInterval={2000}
                        style={{backgroundColor:'#fff'}}
                    >

                            {/* 循环banner */}
                        {this.state.banner.map((item,index)=>{
                            return(
                                <View style={{flex:1}}>
                                    <Image source={{uri: imgUrl+"banner/"+item.object.set_image }} h='200' w={Dimensions.get('window').width} />
                                </View>
                            )
                        })}
                    </Carousel>

                    {/* 智慧社区标题 */}
                    <Row bg='#fff' size='14' h='50' y='center' pa='10' pl='15'>
                        <Text>智慧社区</Text>
                    </Row>

                    {/* 各类 */}
                    <Row bg='#fff' pt='10'>

                        {this.state.category.map((item,index)=>{
                            if(index<4){
                                return(
                                    <ItemY f='1' x='center'>
                                        <Image source={{uri: imgUrl+"serve/"+item.object.set_image }} w='30' h='30' mb='5' />
                                        <Text>{item.set_name}</Text>
                                    </ItemY>
                                )
                            }
                        })}
                    </Row>

                    <Row bg='#fff' pt='16' pb='30'>

                        {this.state.category.map((item,index)=>{
                            if(index>=4 && index<7){
                                return(
                                    <ItemY f='1' x='center'>
                                        <Image source={{uri: imgUrl+"serve/"+item.object.set_image }} w='30' h='30' mb='5' />
                                        <Text>{item.set_name}</Text>
                                    </ItemY>
                                )
                            }
                        })}

                        <TouchOpacity f='1' active={0.6} onPress={(e)=> {
                            this.Nav.navigate('Service')
                        }}>
                            <ItemY f='1' x='center'>
                                <Svg icon={Icon.service_more} color='#666' w='30' h='30' mb='5' />
                                <Text>更多</Text>
                            </ItemY>
                        </TouchOpacity>
                    </Row>

                    {/* 精选推荐标题 */}
                    <Row mt='10' bg='#fff' pa='10' pl='10'>
                        <Text size='16'>精选推荐</Text>
                    </Row>

                    {this.state.article.map((item,index)=>{

                        switch(item.set_showtype){
                            case 1:
                                return(
                                    <Row bg='#fff' px='10' pb='15' bb='1 #f0f0f0'>
                                        <ItemY>
                                            <Text ellipsizeMode='tail' numberOfLines={2}>{item.set_title}</Text>
                                            <Image source={{uri: imgUrl+"article/"+item.object.set_image }} mt='10' style={{width:Dimensions.get('window').width-20,height:170}}/>
                                        </ItemY>
                                    </Row>
                                );
                                break;
                            case 2:
                                return(
                                    <Row bg='#fff' px='10' bb='1 #f0f0f0'>
                                        <Hand f='1'>
                                            <Text ellipsizeMode='tail' numberOfLines={2}>{item.set_title}</Text>
                                        </Hand>
                                        <Hand f='1' py='15' x='right'>
                                            <Image source={{uri: imgUrl+"article/"+item.object.set_image }} style={{width:160,height:100}}/>
                                        </Hand>
                                    </Row>
                                );
                                break;
                            case 3:
                                return(
                                    <Row bg='#fff' px='10' py='15'>
                                        <ItemY f='1'>
                                            <Text ellipsizeMode='tail' numberOfLines={2}>{item.set_title}</Text>
                                            <Hand pt='10'>
                                                {
                                                    item.object.set_image.map((img,imgindex)=>{
                                                        return(
                                                            <Hand f='1' x='left'>
                                                                <Image source={{uri: imgUrl+"article/"+img }} style={{width:110,height:60}}/>
                                                            </Hand>
                                                        );
                                                    })
                                                }

                                            </Hand>
                                        </ItemY>
                                    </Row>
                                );
                                break;
                        }

                    })}


				</Content>
				
                {/* 头部 */}
				<Header h='40' bg='#fff' px='10'>
                    <Row>
                        <ItemX y='center'>
                            <Image source={require('../assets/location.png')} w='16' h='16'/>
                            <Text color='#626262' pl='5'>珑城花园</Text>
                        </ItemX> 
                    </Row>
                    <Row x='right'>
                        <ItemX>
                            <Image source={require('../assets/scan.png')} w='18' h='18' mr='8'/>
                            <Image source={require('../assets/help.png')} w='19' h='19'/>
                        </ItemX>
                    </Row>
                </Header>

				{/* 底部 */}
				<FooterMain current='Home' nav={this.Nav}></FooterMain>

			</Page>
		);
	}
}
